<template>
    <div>
      <div class="item" v-for="(item,index) of categoryList" :key="index">
        <div class="item-title border-bootom">
            <span class="item-title-icon"></span>
            {{item.title}}
        </div>
        <!-- //递归 name -->
        <div v-if="item.children" class="item-chilren">
             <detalist :categoryList="item.children"></detalist>
        </div>

       </div>
       
    </div>
</template>

<script>
export default {
    name:'detalist',
    props:{
        categoryList:Array
    },
    data(){
        return{
           
        }
    }
   
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .item-title
        line-height .8rem
        font-style .32rem
        padding 0 .2rem
        .item-title-icon
            position relative
            display inline-block
            width  .4rem
            height .4rem
            left 0.06rem
            top .1rem
            background-image: url("http://s.qunarzz.com/vc_local/wanle/tu2.png");
            background-repeat: no-repeat;
            background-size: contain ;
            padding-right .05rem
    .item-chilren
        padding 0 .2rem


</style>

